<template>
	<div class="archive">
		<div class="count">{{this.$route.params.name }}：{{num}}</div>
		<el-timeline>
			<el-timeline-item v-for="(activity, index) in activities" :key="index" :color="activity.color" :timestamp="activity.createtime" placement="top" @mouseenter="hoverLine(activity)">
				<div class="line-item">
					<div @click="tiaozhuan(activity.id)" tag="span">{{activity.title}} </div>
				</div>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>

<script>
	// 重新打开页面会刷新tag页面的 update() 生命周期
	export default {
		name: 'archive',
		data() {
			return {
                activities: [],
				num:0,
				name:" "
			};
		},
		methods: {
			hoverLine(activity) {
				activity.color = "#409eff"
			},
			tiaozhuan(id){
		this.$router.push({name:'article',params:{id:id}})
			},
			getData(name){
				//  使用了箭头函数，所以this指向函数外的作用域
			this.$http.get("/api/blog/getlabel",{params : {name}}).then(res => {

     		 this.activities = res.data.data;
    		  this.num = res.data.data.length; 

    });
			},
			judge(){

			let name = this.$route.params.name

		     if(  name !== undefined && name !== this.name){
				 this.name = name ;
				this.getData(name);
		   }
		   
			}
		},
		created(){
         
		  this.judge();
			 
		},
		updated(){
			
			this.judge();
		}
	}
</script>

<style scoped>
	.line-item {
		display: inline-block;
	}
	
	.line-item:hover {
		cursor: pointer;
		color: #409EFF;
	}
	
	.count {
		margin-bottom: 20px;
		font-size: 20px;
		color: #E6A23C;
	}
</style>